<extend name="Base/common"/>
<block name="body">
	<div class="span9 page_message">
		<section id="contents">
			<include file="Addons/_nav"/>
			<div class="tab-content">
				<!-- 表单 -->
				<php> $post_url || $post_url = U('add?model='.$model['id'], $get_param);</php>
				<form id="form" action="{$post_url}" method="post" class="form-horizontal" style="overflow:hidden">
					<div class="fl" style="width:500px;">
						<div class="controls">
							<label class="item-label">
								卡劵标题<span class="check-tips"></span>
							</label>
							<input type="text" name="title" class="text input-large"/>
						</div>

						<div class="controls">
							<label class="item-label"><span class="need_flag">*</span>
								卡券ID<span class="check-tips">通过微信卡券后台获取</span>
							</label>
							<input type="text" name="card_id" class="text input-large"/>
						</div>

						<div class="controls">
							<label class="item-label">
								<span class="need_flag">*</span>卡劵密钥<span class="check-tips">通过微信卡券后台获取</span>
							</label>
							<input type="text" name="appsecre" class="text input-large"/>
						</div>


						<div class="controls">
							<label class="item-label">
								商家名称<span class="check-tips"></span>
							</label>
							<input type="text" name="shop_name" class="text input-large"/>
						</div>
						<div class="controls">
							<label class="item-label">
								商家LOGO<span class="check-tips"></span>
							</label>

							<div class="controls uploadrow2" title="点击修改图片" rel="shop_logo">
								<input type="file" id="upload_picture_shop_logo">
								<input type="hidden" name="shop_logo" id="cover_id_shop_logo"/>

								<div class="upload-img-box" id="cover_id_shop_logo_img" style="display:none">
									<img src="" width="100" height="100"/>
									<em class="edit_img_icon">&nbsp;</em>
								</div>


								<script type="text/javascript">
									//上传图片
									/* 初始化上传插件 */
									$("#upload_picture_shop_logo").uploadify({
										"height": 100,
										"swf": STATIC + "/uploadify/uploadify.swf",
										"fileObjName": "download",
										"buttonText": "上传图片",
										"uploader": UPLOAD_PICTURE,
										"width": 100,
										'removeTimeout': 1,
										'fileTypeExts': '*.jpg; *.png; *.gif;',
										"onUploadSuccess": uploadPictureshop_logo
									});
									function uploadPictureshop_logo(file, data) {
										console.log(data);
										var data = $.parseJSON(data);
										var src = '';
										if (data.status) {
											src = data.url || ROOT + data.path;
											$('#cover_id_shop_logo_img').show().find('img').attr('src', src);
											$('input[name="shop_logo"]').val(data.id);
											$(window.frames["wxIframe"].document).find(".seller img").attr('src', src).show();
											;
										} else {
											updateAlert(data.info);
											setTimeout(function () {
												$('#top-alert').find('button').click();
												$(that).removeClass('disabled').prop('disabled', false);
											}, 1500);
										}
									}
								</script>
							</div>

						</div>
						<div class="controls">
							<label class="item-label">
								卡券图片<span class="check-tips"></span>
							</label>

							<div class="controls uploadrow2" title="点击修改图片" rel="background">
								<input type="file" id="upload_picture_background">
								<input type="hidden" name="background" id="cover_id_background"/>

								<div class="upload-img-box" id="cover_id_background_img" style="display:none">
									<img src="" width="100" height="100"/>
									<em class="edit_img_icon">&nbsp;</em>
								</div>
								<script type="text/javascript">
									//上传图片
									/* 初始化上传插件 */
									$("#upload_picture_background").uploadify({
										"height": 100,
										"swf": STATIC + "/uploadify/uploadify.swf",
										"fileObjName": "download",
										"buttonText": "上传图片",
										"uploader": UPLOAD_PICTURE,
										"width": 100,
										'removeTimeout': 1,
										'fileTypeExts': '*.jpg; *.png; *.gif;',
										"onUploadSuccess": uploadPicturebackground
									});
									function uploadPicturebackground(file, data) {
										var data = $.parseJSON(data);
										var src = '';
										if (data.status) {
											src = data.url || ROOT + data.path;
											$('#cover_id_background_img').show().find('img').attr('src', src);
											$('input[name="background"]').val(data.id);
											$(window.frames["wxIframe"].document).find(".head_pic").attr('src', src).show();
											;
										} else {
											updateAlert(data.info);
											setTimeout(function () {
												$('#top-alert').find('button').click();
												$(that).removeClass('disabled').prop('disabled', false);
											}, 1500);
										}
									}
								</script>
							</div>
						</div>
						<div class="controls">
							<label class="item-label">
								卡券头部背景颜色<span class="check-tips"></span>
							</label>

							<div class="colorPicker" style="width:100px; height:100px;background:#35a2dd"
							     onClick="simpleColorPicker(this,bgColorChange)">
								<input name="head_bg_color" value="#35a2dd" type="hidden"/>
							</div>
						</div>
						<div class="controls">
							<label class="item-label">
								按钮颜色<span class="check-tips"></span>
							</label>

							<div class="colorPicker" style="width:100px; height:100px;background:#0dbd02"
							     onClick="simpleColorPicker(this,buttonColorChange)">
								<input name="button_color" value="#0dbd02" type="hidden"/>
							</div>
						</div>

						<div class="controls">
							<label class="item-label">
								更多按钮<span class="check-tips">格式：按钮名称|按钮跳转地址，每行一个。如：查看官网|http://weiphp.cn</span>
							</label>
							<textarea name="more_button" style="width:405px; height:100px;"></textarea>
						</div>

						<div class="controls">
							<label class="item-label">
								卡券介绍
							</label>
							<textarea name="content" style="width:405px; height:200px;"></textarea>
							{:hook('adminArticleEdit', array('name'=>'content','value'=>''))}
						</div>

					</div>


					<div class="fl" style="width:400px; display:none">
						<div class="wx-header"><span>卡券</span></div>
						<!-- 手机端页面 -->
						<div id="container" class="wx-container">
							<iframe name="wxIframe" frameborder="0" scrolling="no" width="320" height="560"
							        src="{:addons_url('CardVouchers://CardVouchers/package',array('is_edit'=>1))}"></iframe>
							<div class="frame_layer"></div>
						</div>
						<!-- 手机端上页面结束 -->
					</div>


					<div class="form-item form_bh" style="text-align:center">
						<button class="btn submit-btn ajax-post" id="submit" type="submit"
						        target-form="form-horizontal">提交
						</button>
					</div>
			</div>
	</div>
	</form>

	</div>
	</section>
	</div>
</block>
<block name="script">
	
	<link href="__STATIC__/datetimepicker/css/datetimepicker.css?v={:SITE_VERSION}" rel="stylesheet" type="text/css">
	<php>if(C('COLOR_STYLE')=='blue_color') echo '
		<link href="__STATIC__/datetimepicker/css/datetimepicker_blue.css?v={:SITE_VERSION}" rel="stylesheet"
		      type="text/css">
		';
	</php>
	<link href="__STATIC__/datetimepicker/css/dropdown.css?v={:SITE_VERSION}" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.js"></script>
	<script type="text/javascript"
	        src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js?v={:SITE_VERSION}"
	        charset="UTF-8"></script>
	<script type="text/javascript">
		$('#submit').click(function () {
			$('#form').submit();
		});

		$(function () {
			$('.time').datetimepicker({
				format: 'yyyy-mm-dd hh:ii',
				language: "zh-CN",
				minView: 0,
				autoclose: true
			});
			$('.date').datetimepicker({
				format: 'yyyy-mm-dd',
				language: "zh-CN",
				minView: 2,
				autoclose: true
			});
			showTab();
			$('.toggle-data').each(function () {
				var data = $(this).attr('toggle-data');
				if (data == '') return true;

				if ($(this).is(":selected") || $(this).is(":checked")) {
					change_event(this)
				}
			});

			$('select').change(function () {
				$('.toggle-data').each(function () {
					var data = $(this).attr('toggle-data');
					if (data == '') return true;

					if ($(this).is(":selected") || $(this).is(":checked")) {
						change_event(this)
					}
				});
			});
			//编辑页面预览
			$('input[name="title"]').keyup(function () {
				var val = $(this).val();
				$(window.frames["wxIframe"].document).find("#title").text(val);
			})
			$('input[name="shop_name"]').keyup(function () {
				var val = $(this).val();
				$(window.frames["wxIframe"].document).find(".name").text(val);
			})
			$('input[name="use_start_time"]').on('changeDate', function (ev) {
				$(window.frames["wxIframe"].document).find(".use_start_time").text($(this).val());
			});
			$('input[name="over_time"]').on('changeDate', function (ev) {
				$(window.frames["wxIframe"].document).find(".over_time").text($(this).val());
			});
			var domUtils = UE.dom.domUtils;
			imageEditor.addListener('ready', function () {
				imageEditor.focus(true);
				domUtils.on(imageEditor.body, "keyup", function () {
					$(window.frames["wxIframe"].document).find("#content").html(UE.getEditor('editor_id_content').getContentTxt());
				})
			});
		});
		function buttonColorChange(color) {
			//$(window.frames["wxIframe"].document).find(".start_btn").css('background-color',color);
		}
		function bgColorChange(color) {
			//$(window.frames["wxIframe"].document).find(".head_hd").css('background-color',color);
			//$(window.frames["wxIframe"].document).find(".head_pic").hide();
			$('input[name="background"]').val("");
		}
	</script>
</block>
